<template>
  <div class="authority">
    <el-row :gutter="20">
      <el-col :span="10">
        <el-tree ref="el_Tree" :data="TreeData" show-checkbox check-strictly node-key="id" :default-expand-all="true">
        </el-tree>
      </el-col>
      <el-col :span="4" class="btn_wrapper">
        <el-button type="primary" size="medium" @click="updateCheckedNodes">修改选中</el-button>
        <el-button type="success" size="medium" @click="addCheckedNodes">添加下级</el-button>
        <el-button type="danger" size="medium" @click="delCheckedNodes">删除选中</el-button>
      </el-col>
      <el-col :span="10">
        <div class="update_auth-box">
          <el-form :model="nodeCon" ref="updateNodeForm" :rules="rules">
            <el-form-item label="父级：" v-show="fathShow" label-width="120px" prop="nodeFath">
              <el-input v-model="nodeCon.nodeFath"></el-input>
            </el-form-item>
            <el-form-item label="名称：" label-width="120px" prop="nodeName">
              <el-input v-model="nodeCon.nodeName"></el-input>
            </el-form-item>
            <el-form-item label="链接：" label-width="120px" prop="nodeUrl">
              <el-input v-model="nodeCon.nodeUrl"></el-input>
            </el-form-item>
            <el-form-item label="排序：" label-width="120px" prop="nodeSort">
              <el-input v-model="nodeCon.nodeSort"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="updateAuthConBtn">保存</el-button>
              <el-button @click="handleupdateNodeForm">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script lang="ts">
import {
  defineComponent,
  ref,
  onMounted,
  getCurrentInstance,
  ComponentInternalInstance,
  reactive,
  toRefs,
} from 'vue'
import { Auth } from '@/api/apiConfig'
import { ElMessage } from 'element-plus'

export default defineComponent({
  setup() {
    let TreeData = ref<any[]>([])
    let fathShow = ref<boolean>(false)
    let clickType = ref<string>('')
    let nodeCon = reactive({
      nodeId: '',
      nodeFath: '',
      nodeName: '',
      nodeUrl: '',
      nodeSort: '',
    })
    const updateNodeForm = ref()
    const rules = reactive({
      nodeFath: [
        {
          required: true,
          message: '请输入名称',
          trigger: 'blur',
        },
      ],
      nodeName: [
        {
          required: true,
          message: '请输入名称',
          trigger: 'blur',
        },
      ],
      nodeUrl: [
        {
          required: false,
        },
      ],
      nodeSort: [
        {
          required: false,
        },
      ],
    })
    const { proxy }: any = getCurrentInstance() as ComponentInternalInstance
    const getAuthList = () => {
      const params = {}
      Auth.getAuthList(params).then((res) => {
        TreeData.value = res.data
      })
    }
    const updateCheckedNodes = () => {
      clickType.value = 'updateCheckedNodes'
      const result = commonGetChecked()
      if (result) {
        nodeCon.nodeId = result[0].id
        nodeCon.nodeName = result[0].label
        nodeCon.nodeUrl = result[0].url
        nodeCon.nodeSort = result[0].sort
      }
    }
    const addCheckedNodes = () => {
      const result = commonGetChecked()
      clickType.value = 'addCheckedNodes'
      if (result && result[0].pId === '0') {
        nodeCon.nodeId = result[0].id
        nodeCon.nodeFath = result[0].label
        fathShow.value = true
      } else {
        ElMessage({
          type: 'error',
          message: '不可以再添加下级',
          onClose: function () {
            proxy?.$refs.el_Tree.setCheckedKeys([])
          },
        })
      }
    }
    const delCheckedNodes = () => {
      const result = commonGetChecked()
      if (result) {
        const params = {
          fAuthId: result[0].id,
        }
        Auth.deleteAuthCon(params).then((res) => {
          if (res.statusCode === 200) {
            ElMessage({
              type: 'success',
              message: '删除成功',
              onClose: function () {
                getAuthList()
              },
            })
          }
        })
      }
    }
    const commonGetChecked = () => {
      const treeNode = proxy?.$refs.el_Tree.getCheckedNodes()
      if (treeNode.length < 1) {
        ElMessage({
          type: 'error',
          message: '请选择节点',
          onClose: function () {
            proxy?.$refs.el_Tree.setCheckedKeys([])
          },
        })
        return false
      } else if (treeNode.length > 1) {
        ElMessage({
          type: 'error',
          message: '只能选择单节点',
          onClose: function () {
            proxy?.$refs.el_Tree.setCheckedKeys([])
          },
        })
        return false
      } else {
        return treeNode
      }
    }
    const handleupdateNodeForm = () => {
      updateNodeForm.value.resetFields()
      proxy?.$refs.el_Tree.setCheckedKeys([])
      fathShow.value = false
    }
    const updateAuthConBtn = () => {
      if (clickType.value === 'updateCheckedNodes') {
        const params = {
          fAuthId: nodeCon.nodeId,
          fAuthName: nodeCon.nodeName,
          fAuthUrl: nodeCon.nodeUrl,
          fAuthSort: nodeCon.nodeSort,
        }
        Auth.updateAuthCon(params).then((res) => {
          if (res.statusCode === 200) {
            ElMessage({
              type: 'success',
              message: '修改成功',
              onClose: function () {
                updateNodeForm.value.resetFields()
                getAuthList()
              },
            })
          }
        })
      } else {
        const params = {
          fAuthName: nodeCon.nodeName,
          fAuthUrl: nodeCon.nodeUrl,
          fPId: nodeCon.nodeId,
        }
        Auth.addAuthCon(params).then((res) => {
          if (res.statusCode === 200) {
            ElMessage({
              type: 'success',
              message: '新增成功',
              onClose: function () {
                updateNodeForm.value.resetFields()
                getAuthList()
              },
            })
          }
        })
      }
      fathShow.value = false
    }
    onMounted(() => {
      getAuthList()
    })
    return {
      TreeData,
      updateCheckedNodes,
      addCheckedNodes,
      delCheckedNodes,
      nodeCon,
      updateNodeForm,
      rules,
      handleupdateNodeForm,
      updateAuthConBtn,
      fathShow,
    }
  },
})
</script>

<style scoped lang="scss">
.authority {
  height: 500px;
  overflow-x: hidden;
  overflow-y: auto;
}
.btn_wrapper {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}
.update_auth-box {
  width: 70%;
  margin: 0 auto;
  text-align: center;
}
</style>
